<template>
	<view>
		<up-popup :show="show" mode="center" :round="10" @open="handleOpen">
			<view class="msg_content_wrap">
				<view class="title">提示</view>
				<view class="msg">{{ config.message }}</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						v-if="config.showCancel" 
						@click="cancel">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="confirm" 
						:loading="btnLoading"
						:disabled="btnLoading">确定</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref,defineProps,defineEmits,watch } from 'vue'
	
	const btnLoading = ref(false)
	
	const props = defineProps({
		show:{
			type:Boolean,
			default:()=>{
				return false
			}
		},
		config:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	})
	
	watch(()=>props.show,(newVal,oldVal)=>{
		console.log('newVal:'+newVal)
		if(!newVal)btnLoading.value = false;
	})
	
	const handleOpen = ()=>{
		btnLoading.value = false
	}
	
	const emits = defineEmits(['cancel','confirm'])
	
	const cancel = ()=>{
		emits('cancel',props.config.data)
	}
	const confirm = ()=>{
		btnLoading.value = true
		emits('confirm',props.config.data)
	}
</script>

<style lang="scss">
	.msg_content_wrap{
		width: 500rpx;
		padding:0 30rpx;
		.title{
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;
		}
		.msg{
			color: #666666;
			font-size: 36rpx;
			text-align: center;
			padding-top: 40rpx;
		}
		.btn_wrap{
			display: flex;
			justify-content: center;
			padding: 60rpx 0 30rpx;
			.btn{
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align:  center;
				border-radius: 120rpx;
				font-size: 32rpx;
				padding: 0;
				margin: 0;
			}
			.cancel{
				background: #FFF0F0;
				color: #FE4C20;
				margin-right: 60rpx;
			}
			.confirm{
				background: #F5564D;
				color: #FFFFFF;
			}
		}
		
	}
</style>